<template>
  <div class="Table">
    <div class="tableTilte">
      {{ tableTilte }}
    </div>
    <div class="tableContent">
      <el-table
        :data="table1Data"
        style="width: 100%"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="name" label="问题类型/风险水平">
        </el-table-column>
        <el-table-column prop="zanwu" label="暂无"> </el-table-column>
        <el-table-column prop="jiaodi" label="较低"> </el-table-column>
        <el-table-column prop="zhodeng" label="中等"> </el-table-column>
        <el-table-column prop="jiaogao" label="较高"> </el-table-column>
        <el-table-column prop="jigao" label="极高"> </el-table-column>
      </el-table>
    </div>

    <div class="tableTilte">
      {{ table2Tilte }}
    </div>
    <div class="tableContent">
      <el-table
        :data="table2Data"
        style="width: 100%"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="questionType" label="咨询问题/严重程度">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == 1">婚恋关系</span>
            <span v-if="scope.row.questionType == 2">亲子关系</span>
            <span v-if="scope.row.questionType == 3">职业发展</span>
            <span v-if="scope.row.questionType == 4">社会交往</span>
            <span v-if="scope.row.questionType == 5">个人成长</span>
            <span v-if="scope.row.questionType == 6">情感问题</span>
            <span v-if="scope.row.questionType == 7">学业问题</span>
            <span v-if="scope.row.questionType == 8">行为问题</span>
            <span v-if="scope.row.questionType == 'other'">其他</span>
          </template>
        </el-table-column>
        <el-table-column prop="0" label="一级"> </el-table-column>
        <el-table-column prop="1" label="二级"> </el-table-column>
        <el-table-column prop="2" label="三级"> </el-table-column>
        <el-table-column prop="3" label="四级"> </el-table-column>
        <el-table-column prop="4" label="五级"> </el-table-column>
      </el-table>
      <consultChart1 :chart1List="chart1Data"></consultChart1>
      <consultChart2 :chart2List="chart2Data"></consultChart2>
    </div>
  </div>
</template>

<script>
import consultChart1 from "@/views/fileManagement/crisis/consult/consultChart1.vue";
import consultChart2 from "@/views/fileManagement/crisis/consult/consultChart2.vue";
export default {
  name: "consultTable",

  props: ["tableTilte", "tableData", "table2Tilte"],
  data() {
    return {
      allData: [],
      table1Data: [],
      table2Data: [],
      chart1Data: [],
      chart2Data: [],
    };
  },
  created() {
    setTimeout(() => {
      this.allData = this.tableData;
      console.log("allData", this.allData);
      const notInTheHeart = this.allData.notInTheHeart;
      this.table1Data = [
        {
          name: "潜在风险评估",
          zanwu: notInTheHeart.warningStatistics[0]["0"],
          jiaodi: notInTheHeart.warningStatistics[0]["1"],
          zhodeng: notInTheHeart.warningStatistics[0]["2"],
          jiaogao: notInTheHeart.warningStatistics[0]["3"],
          jigao: notInTheHeart.warningStatistics[0]["4"],
        },
        {
          name: "自杀可能性",
          zanwu: notInTheHeart.idioctoniaStatistics[0]["0"],
          jiaodi: notInTheHeart.idioctoniaStatistics[0]["1"],
          zhodeng: notInTheHeart.idioctoniaStatistics[0]["2"],
          jiaogao: notInTheHeart.idioctoniaStatistics[0]["3"],
          jigao: notInTheHeart.idioctoniaStatistics[0]["4"],
        },
        {
          name: "鉴别评估",
          zanwu: notInTheHeart.identificationStatistics[0]["0"],
          jiaodi: notInTheHeart.identificationStatistics[0]["1"],
          zhodeng: notInTheHeart.identificationStatistics[0]["2"],
          jiaogao: notInTheHeart.identificationStatistics[0]["3"],
          jigao: notInTheHeart.identificationStatistics[0]["4"],
        },
        {
          name: "跟踪评估",
          zanwu: notInTheHeart.trackingStatistics[0]["0"],
          jiaodi: notInTheHeart.trackingStatistics[0]["1"],
          zhodeng: notInTheHeart.trackingStatistics[0]["2"],
          jiaogao: notInTheHeart.trackingStatistics[0]["3"],
          jigao: notInTheHeart.trackingStatistics[0]["4"],
        },
      ];
      this.table2Data = this.allData.problemLevel;
      const chart2List = this.table2Data.reduce(
        (acc, obj) => {
          acc[0] += obj["0"];
          acc[1] += obj["1"];
          acc[2] += obj["2"];
          acc[3] += obj["3"];
          acc[4] += obj["4"];
          return acc;
        },
        [0, 0, 0, 0, 0]
      );
      this.chart2Data = chart2List.map((value, index) => {
        let name = "";
        switch (index) {
          case 0:
            name = "一级";
            break;
          case 1:
            name = "二级";
            break;
          case 2:
            name = "三级";
            break;
          case 3:
            name = "四级";
            break;
          case 4:
            name = "五级";
            break;
          default:
            name = "未知级别";
            break;
        }
        return { value: value, name: name };
      });
      const chart1List = this.allData.numberOfSorties;
      this.chart1Data = Object.entries(chart1List).map(([key, value]) => {
        let name = "";
        switch (parseInt(key)) {
          case 1:
            name = "婚恋关系";
            break;
          case 2:
            name = "亲子关系";
            break;
          case 3:
            name = "职业发展";
            break;
          case 4:
            name = "社会交往";
            break;
          case 5:
            name = "个人成长";
            break;
          case 6:
            name = "情感问题";
            break;
          case 7:
            name = "学业问题";
            break;
          case 8:
            name = "行为问题";
            break;
          default:
            name = "其他";
            break;
        }
        return { value: value, name: name };
      });
      // console.log("chart1Data", this.chart1Data);
    }, 1000);
  },
  components: {
    consultChart1,
    consultChart2,
  },
  methods: {},
};
</script>

<style scoped>
.Table {
  width: 100%;
  text-align: start;
  margin: 1rem 0;
}
.tableTilte {
  font-size: 1.3rem;
  color: rgb(120, 191, 233);
  margin: 2rem 0;
}
</style>